﻿.button 
{
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    padding: .3em 1.2em ;
    border-radius: 4px;
    font-size: 12.5px;
    font-weight: bold;
    border: none;
}
.button:hover 
{
    color: #fff;
    text-decoration: none;
}
.button:active {
    position: relative;
    top: 1px;
}

.medium {
    font-size: 12px;
    padding: .2em 1em;
}


/* color styles 
---------------------------------------------- */

/* black */
.black {
	color: #d7d7d7;
	background: #333;
}
.black:hover {
	background: #666;
}


/* gray */
.gray {
	color: #e9e9e9;
	background: #666;

}
.gray:hover {
	background: #999;
}


/* white */
.white {
	color: #606060;
	background: #fff;
}
.white:hover {
	background: #ededed;
}

/* orange */
.orange {
	color: #fff;
	background: #f78d1d;
}
.orange:hover {
	background: #f7a957;
}

/* red */
.red {
	color: #fff;
	background: #d81b21;
}
.red:hover {
	background: #d9575b;
}

/* blue */
.blue {
	color: #fff;
	background: #0095cd;
}
.blue:hover 
{
	background: #44a8cc;
}


/* rosy */
.rosy {
	color: #fae7e9;
	background: #da5867;
}
.rosy:hover {
	background: #d97783;
}

/* green */
.green {
	color: #fff;
	background: #64991e;
}
.green:hover {
	background: #7ea24e;
}

/* pink */
.pink {
	color: #fff;
	background: #f895c2;
}
.pink:hover {
	background: #f7c6dc;
}